<template>
  <div class="container">
    <div class="main">
      <el-row class="statistics">
        <el-col :span="18">
          <el-row>
            <el-col :span="13">
              <div class="Work-order-statistics">
                <div class="title">
                  工单统计
                  <div class="sub-title">
                    {{ mouthStart.replace(/-/g, ".") }} ~
                    {{ datenow.replace(/-/g, ".") }}
                  </div>
                </div>
                <div class="sbody">
                  <div class="stats">
                    <div class="items">
                      <div class="stats-num">{{ allTask }}</div>
                      <div class="stats-text">工单总数（个）</div>
                    </div>
                  </div>
                  <div class="stats">
                    <div class="items">
                      <div class="stats-num">{{ completedTask }}</div>
                      <div class="stats-text">完成工单（个）</div>
                    </div>
                  </div>
                  <div class="stats">
                    <div class="items">
                      <div class="stats-num">{{ goingTask }}</div>
                      <div class="stats-text">进行工单（个）</div>
                    </div>
                  </div>
                  <div class="stats">
                    <div class="items">
                      <div class="stats-num">{{ cancelTask }}</div>
                      <div class="stats-text">取消工单（个）</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="11">
              <div class="sales-statistics">
                <div class="title">
                  销售统计
                  <div class="sub-title">
                    {{ mouthStart.replace(/-/g, ".") }} ~
                    {{ datenow.replace(/-/g, ".") }}
                  </div>
                </div>
                <div class="sbody">
                  <div class="stats">
                    <div class="items">
                      <div class="stats-num" style="color: #ff5757">
                        {{ orderCount }}
                      </div>
                      <div class="stats-text" style="color: #de9690">
                        订单量（个）
                      </div>
                    </div>
                  </div>
                  <div class="stats">
                    <div class="items">
                      <div class="stats-num" style="color: #ff5757">
                        {{ orderAmount / 100 }}
                      </div>
                      <div class="stats-text" style="color: #de9690">
                        销售额（万元）
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <div class="sales-echarts">
              <div class="sales-echarts-head">
                <div class="title">
                  销售数据
                  <div v-if="itemText === '周'" class="sub-title">
                    {{ weekStart.replace(/-/g, ".") }} ~
                    {{ datenow.replace(/-/g, ".") }}
                  </div>
                  <div v-else-if="itemText === '月'" class="sub-title">
                    {{ mouthStart.replace(/-/g, ".") }} ~
                    {{ datenow.replace(/-/g, ".") }}
                  </div>
                  <div v-else class="sub-title">
                    {{ yearStart.replace(/-/g, ".") }} ~
                    {{ datenow.replace(/-/g, ".") }}
                  </div>
                </div>
                <div class="week-tear">
                  <div
                    class="item"
                    style="cursor: pointer"
                    :class="{ timechoice: itemText === '周' }"
                    @click="changeTime('周')"
                  >
                    周
                  </div>
                  <div
                    class="item"
                    style="cursor: pointer"
                    :class="{ timechoice: itemText === '月' }"
                    @click="changeTime('月')"
                  >
                    月
                  </div>
                  <div
                    class="item"
                    style="cursor: pointer"
                    :class="{ timechoice: itemText === '年' }"
                    @click="changeTime('年')"
                  >
                    年
                  </div>
                </div>
              </div>
              <div class="sales-echarts-body">
                <div
                  v-show="lineshow"
                  ref="salechart"
                  class="chart"
                  style="height: 100%; width: 100%"
                />
                <div v-show="!lineshow" class="chart">
                  <img
                    src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png"
                    alt=""
                  >
                  <div
                    class="bad-device-body-text"
                    style="font-size: 14px; margin-top: 25px"
                  >
                    暂无数据
                  </div>
                </div>

                <div
                  v-show="pieshow"
                  ref="salechart1"
                  class="chart"
                  style="height: 100%; width: 100%"
                />
                <div v-show="!pieshow" class="chart">
                  <img
                    src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png"
                    alt=""
                  >
                  <div
                    class="bad-device-body-text"
                    style="font-size: 14px; margin-top: 25px"
                  >
                    暂无数据
                  </div>
                </div>
              </div>
            </div>
          </el-row>
        </el-col>
        <el-col :span="6">
          <div class="sale-rank">
            <div class="title">
              商品热榜
              <div class="sub-title">
                {{ mouthStart.replace(/-/g, ".") }} ~
                {{ datenow.replace(/-/g, ".") }}
              </div>
            </div>
            <div class="sale-body">
              <div v-for="(item, index) in saleRank" :key="index">
                <el-row>
                  <el-col :span="5">
                    <div
                      :class="{
                        top1: index === 0,
                        top2: index === 1,
                        top3: index === 2,
                        top: index >= 2,
                      }"
                    >
                      {{ index + 1 }}
                    </div>
                  </el-col>
                  <el-col :span="13" style="fontsize: 15px; color: #333">{{
                    item.skuName
                  }}</el-col>
                  <el-col
                    :span="6"
                    style="fontsize: 15px; color: #737589; text-align: right"
                  >{{ item.count }}单</el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row class="bottom">
        <el-col :span="14">
          <div class="friend-chart">
            <div class="friend-chart-title">
              <span>合作商点位数Top5</span>
              <i
                class="el-icon-chat-dot-round"
                style="color: #5f84ff; cursor: pointer"
              />
            </div>

            <el-row class="friend-chart-body">
              <el-col :span="17">
                <div ref="friend" style="height: 284px; width: 580px" />
              </el-col>
              <el-col :span="7">
                <div class="collect">
                  <div class="count">{{ nodecount }}</div>
                  <div class="name">点位数</div>
                  <div class="count" style="margin-top: 20px">
                    {{ partercount }}
                  </div>
                  <div class="name">合作商数</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="bad-device">
            <div class="friend-chart-title">
              <span>异常设备监控</span>
              <i
                class="el-icon-chat-dot-round"
                style="color: #5f84ff; cursor: pointer"
                @click="$router.push('/404')"
              />
            </div>
            <div class="bad-device-body">
              <img
                v-show="!baddeviceData.length"
                src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png"
                alt=""
              >
              <div
                v-show="!baddeviceData.length"
                class="bad-device-body-text"
                style="font-size: 14px; margin-top: 25px"
              >
                暂无数据
              </div>
              <el-table
                v-show="baddeviceData.length"
                :data="baddeviceData"
                style="width: 100%; margin-top: 10px"
                :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }"
              >
                <el-table-column prop="time" label="故障时间" width="190" />
                <el-table-column prop="address" label="设备地址" width="190" />
                <el-table-column prop="innerCode" label="设备编号" />
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {
  getTopGoods,
  getOrderCount,
  getOrderAmount,
  allTaskMount,
  completeTaskMount,
  taskingMount,
  cancelTaskMount,
  amountGoing,
  amountArea,
  friendTop5,
  partnerCount,
  nodeCount,
  badDevice
} from '@/api/dashboard'
import getDateFn from '@/utils/getDate'

export default {
  name: '',
  data() {
    return {
      itemText: '周',
      saleRank: [], // 热销商品
      mouthStart: '', // 本月开始时间
      weekStart: '',
      yearStart: '',
      datenow: '', // 现在的时间
      orderCount: null,
      orderAmount: null,
      allTask: null, // 工单统计
      goingTask: null,
      completedTask: null,
      cancelTask: null,
      linechartData: null, // 图形数据
      barchartData: null,
      piechartData: null,
      lineshow: true, // 折线图显示与否
      pieshow: true, // 饼图显示与否
      friendTop5Data: [],
      nodecount: null,
      partercount: null,
      baddeviceData: []
    }
  },
  watch: {
    friendTop5Data(value) {
      this.friend.setOption({
        color: ['#85a7ff', '#99ebbd', '#ffb18b', '#c6ebff', '#becce6'],
        tooltip: {
          trigger: 'item',
          formatter: '{b} <br/> 总占比 : {d}%'
        },
        label: {
          formatter: `{b}\n{d}%`
        },
        labelLine: {
          length: 80,
          length2: 10,
          lineStyle: {
            color: '#cfcfcf'
          }
        },
        series: {
          name: 'Area Mode',
          type: 'pie',
          radius: [30, 100],
          roseType: 'radius',
          emphasis: {
            scale: true,
            scaleSize: 10
          },
          data: value
        }
      })
    }
  },
  async mounted() {
    const myChart = echarts.init(this.$refs.salechart)
    const myChart1 = echarts.init(this.$refs.salechart1)
    // 绘制图表
    this.linechartData = {
      title: {
        left: 'center',
        text: '销售额趋势图',
        textStyle: {
          fontSize: 15
        }
      },
      grid: {
        left: '8%',
        right: '8%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line'
        },
        formatter: `销售额:{c}</br>{b}`
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
      },
      yAxis: {
        name: '单位：元',
        type: 'value'
      },
      series: [
        {
          name: '销售额',
          data: [],
          type: 'line',
          color: '#ff5757',
          smooth: true,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#ff5757' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#fff' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        }
      ]
    }
    this.barchartData = {
      color: ['#91b0ff'],
      title: {
        left: 'center',
        text: '销售额分布',
        textStyle: {
          fontSize: 15
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: `销售额:{c}</br>{b}`
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: [],
        axisTick: {
          alignWithLabel: true
        }
      },
      yAxis: [
        {
          name: '单位：元',
          type: 'value'
        }
      ],
      series: [
        {
          name: '销售额',
          type: 'bar',
          barWidth: '20px',
          data: [],
          itemStyle: {
            borderRadius: [5, 5, 0, 0, 0]
          }
        }
      ]
    }

    const res = await amountGoing({
      start: this.weekStart,
      end: this.datenow,
      status: 1
    })
    if (res.xAxis.length) {
      this.linechartData.xAxis.data = res.xAxis
      this.linechartData.series[0].data = res.series
      this.lineshow = true
    } else {
      this.lineshow = false
    }

    const data = await amountArea({ start: this.weekStart, end: this.datenow })
    if (data.xAxis.length) {
      this.barchartData.xAxis.data = data.xAxis
      this.barchartData.series[0].data = data.series
      this.pieshow = true
    } else {
      this.pieshow = false
    }

    myChart.setOption(this.linechartData)
    myChart1.setOption(this.barchartData)
    // 获取表格
    this.friend = echarts.init(this.$refs.friend)
  },
  async created() {
    // 设置本年本月本周本日时间
    this.datenow = getDateFn.getDate()
    this.weekStart = getDateFn.getMonday('s')
    this.mouthStart = getDateFn.getMonth('s', 0)
    this.yearStart = getDateFn.getYear('s')

    const mouthStartToNow = {
      mouthStart: this.mouthStart,
      datenow: this.datenow
    }
    // top商品获取
    const res = await getTopGoods(mouthStartToNow)
    this.saleRank = [...res]
    // 获取销售统计的数据,订单量和销售额
    this.orderCount = await getOrderCount(mouthStartToNow)
    this.orderAmount = await getOrderAmount(mouthStartToNow)
    // 工单统计
    const alltask = await allTaskMount()
    this.allTask = alltask.totalCount
    const complete = await completeTaskMount()
    this.completedTask = complete.totalCount
    const tasking = await taskingMount()
    this.goingTask = tasking.totalCount
    const canceltask = await cancelTaskMount()
    this.cancelTask = canceltask.totalCount

    // 获取合作商信息
    this.friendTop5Data = await friendTop5()

    // 获取合作商数目和点位数
    this.partercount = await partnerCount()
    this.nodecount = await nodeCount()

    // 获取异常设备
    const data = await badDevice()
    this.baddeviceData = [...data]
  },
  methods: {
    async changeTime(text) {
      this.itemText = text
      this.linechartData = {
        title: {
          left: 'center',
          text: '销售额趋势图',
          textStyle: {
            fontSize: 15
          }
        },
        grid: {
          left: '8%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          formatter: `销售额:{c}</br>{b}`
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          name: '单位：元',
          type: 'value'
        },
        series: [
          {
            name: '销售额',
            data: [],
            type: 'line',
            color: '#ff5757',
            smooth: true,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#ff5757' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }
      this.barchartData = {
        color: ['#91b0ff'],
        title: {
          left: 'center',
          text: '销售额分布',
          textStyle: {
            fontSize: 15
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: `销售额:{c}</br>{b}`
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: [
          {
            name: '单位：元',
            type: 'value'
          }
        ],
        series: [
          {
            name: '销售额',
            type: 'bar',
            barWidth: '20px',
            data: [],
            itemStyle: {
              borderRadius: [5, 5, 0, 0, 0]
            }
          }
        ]
      }
      if (text === '周') {
        const myChart = echarts.init(this.$refs.salechart)
        const myChart1 = echarts.init(this.$refs.salechart1)
        const res = await amountGoing({
          start: this.weekStart,
          end: this.datenow,
          status: 1
        })
        if (res.xAxis.length) {
          this.linechartData.xAxis.data = res.xAxis
          this.linechartData.series[0].data = res.series
          this.lineshow = true
        } else {
          this.lineshow = false
        }

        const data = await amountArea({
          start: this.weekStart,
          end: this.datenow
        })
        if (data.xAxis.length) {
          this.barchartData.xAxis.data = data.xAxis
          this.barchartData.series[0].data = data.series
          this.pieshow = true
        } else {
          this.pieshow = false
        }

        myChart.setOption(this.linechartData)
        myChart1.setOption(this.barchartData)

        // test
        // this.$refs.salechart.style.display = 'none'
      } else if (text === '月') {
        const myChart = echarts.init(this.$refs.salechart)
        const myChart1 = echarts.init(this.$refs.salechart1)
        const res = await amountGoing({
          start: this.mouthStart,
          end: this.datenow,
          status: 1
        })
        if (res.xAxis.length) {
          this.linechartData.xAxis.data = res.xAxis
          this.linechartData.series[0].data = res.series
          this.lineshow = true
        } else {
          this.lineshow = false
        }

        const data = await amountArea({
          start: this.mouthStart,
          end: this.datenow
        })
        if (data.xAxis.length) {
          this.barchartData.xAxis.data = data.xAxis
          this.barchartData.series[0].data = data.series
          this.pieshow = true
        } else {
          this.pieshow = false
        }

        myChart.setOption(this.linechartData)
        myChart1.setOption(this.barchartData)
      } else {
        const myChart = echarts.init(this.$refs.salechart)
        const myChart1 = echarts.init(this.$refs.salechart1)
        const res = await amountGoing({
          start: this.yearStart,
          end: this.datenow,
          status: 2
        })
        if (res.xAxis.length) {
          this.linechartData.xAxis.data = res.xAxis
          this.linechartData.series[0].data = res.series
          this.lineshow = true
        } else {
          this.lineshow = false
        }

        const data = await amountArea({
          start: this.yearStart,
          end: this.datenow
        })
        if (data.xAxis.length) {
          this.barchartData.xAxis.data = data.xAxis
          this.barchartData.series[0].data = data.series
          this.pieshow = true
        } else {
          this.pieshow = false
        }

        myChart.setOption(this.linechartData)
        myChart1.setOption(this.barchartData)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f8fafd;
  padding: 20px;
  .main {
    .statistics {
      height: 538px;
      .Work-order-statistics {
        display: flex;
        flex-direction: column;
        margin: 0 10px;
        height: 166px;
        padding: 20px;
        background: #e9f3ff;
        background-image: url(),
          url(https://likede2-admin.itheima.net/img/task.66b715b7.png);
        background-repeat: no-repeat, no-repeat;
        background-position: 0 0, calc(100% - 12px) 100%;
        border-radius: 20px;
      }
      .sales-statistics {
        display: flex;
        flex-direction: column;
        margin: 0 10px;
        height: 166px;
        padding: 20px;
        border-radius: 20px;
        background: #fbefe8
          url(https://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat
          calc(100% - 12px) 100%;
      }
      .sales-echarts {
        display: flex;
        flex-direction: column;
        margin: 20px 10px 0 10px;
        padding: 20px;
        height: 352px;
        background-color: #fff;
        border-radius: 20px;
        .sales-echarts-head {
          display: flex;
          justify-content: space-between;
          .week-tear {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 129px;
            height: 34px;
            background: rgba(233, 243, 255, 0.37);
            border-radius: 10px;
            .item {
              height: 25px;
              width: 37px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 7px;
            }
            .timechoice {
              background-color: #fff;
              box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.11);
            }
          }
        }
        .sales-echarts-body {
          flex: 1;
          display: flex;
          .chart {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
        }
      }
      .title {
        display: flex;
        color: #333;
        font-weight: 700;
        .sub-title {
          margin-left: 10px;
          font-size: 13px;
          font-weight: 400;
          color: #999;
        }
      }
      .sbody {
        flex: 1;
        display: flex;
        justify-content: space-evenly;
        .stats {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          .items {
            .stats-num {
              color: #072074;
              height: 50px;
              font-size: 36px;
              line-height: 50px;
              font-weight: 600;
            }
            .stats-text {
              height: 17px;
              margin-top: 3px;
              font-size: 12px;
              font-weight: 400;
              color: #91a7dc;
              line-height: 17px;
            }
          }
        }
      }
      .sale-rank {
        display: flex;
        flex-direction: column;
        height: 538px;
        padding: 20px;
        background-color: #fff;
        border-radius: 20px;
        .sale-body {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-top: 20px;
          & > div {
            height: 24px;
            font-size: 12px;
            .top1 {
              color: #8e5900;
              margin-left: 10px;
              text-align: center;
              width: 21px;
              height: 20px;
              background: url();
            }
            .top2 {
              color: #494949;
              margin-left: 10px;
              text-align: center;
              width: 21px;
              height: 20px;
              background: url();
            }
            .top3 {
              color: #cf6d3d;
              margin-left: 10px;
              text-align: center;
              width: 21px;
              height: 20px;
              background: url();
            }
            .top {
              color: #e9b499;
              margin-left: 10px;
              text-align: center;
              width: 21px;
              height: 20px;
              background: url();
            }
          }
        }
      }
    }

    .bottom {
      margin-left: 10px;
      margin-top: 20px;
      .friend-chart-title {
        display: flex;
        justify-content: space-between;
        font-weight: 700;
        color: #333;
      }
      .friend-chart {
        display: flex;
        flex-direction: column;
        margin: 0 10px 0 0;
        height: 353px;
        border-radius: 20px;
        padding: 20px;
        background-color: #fff;
        .friend-chart-body {
          flex: 1;
          .collect {
            width: 154px;
            height: 230px;
            padding-top: 47px;
            padding-left: 38px;
            background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
              linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
              linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
              linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
            background-size: 50% 50%;
            background-repeat: no-repeat;
            .name {
              height: 17px;
              margin-top: 6px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #000412;
              line-height: 17px;
            }
            .count {
              height: 33px;
              font-size: 24px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #072074;
              line-height: 33px;
            }
          }
        }
      }
      .bad-device {
        display: flex;
        flex-direction: column;
        margin: 0 0 0 10px;
        height: 353px;
        border-radius: 20px;
        padding: 20px;
        background-color: #fff;
        .bad-device-body {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
</style>
